<template>
  <div class="CurrenyAccount">
    <div class="w80 flex minh350 mt50 mauto baselight">
      <div class="w20 tc ft16 assets bdr bgpart">
        <a
            v-for="item in tabs"
            :key="item.key"
            :class="[
            'ptb20 block basecolor bgpart',
            tabsKey === item.key ? 'router-link-exact-active routeractive' : '',
          ]"
            @click="tabsHandler(item.key)"
        >
          {{ item.name }}
        </a>
      </div>
      <div class="baselight flex1 bgpart ml10 minvh70">
        <template v-if="tabsKey === 'CurrencyAccount'">
          <CurrencyAccount ref="CurrencyAccount"/>
        </template>
        <template v-if="tabsKey === 'LegalCurrencyAccount'">
          <LegalCurrencyAccount ref="LegalCurrencyAccount"/>
        </template>
        <template v-if="tabsKey == 'NewCurrencySubscriptionRecord'">
          <NewCurrencySubscriptionRecord/>
        </template>
        <template v-if="tabsKey == 'transfer'">
          <Transfer ref="transfer"/>
        </template>
        <template v-if="tabsKey === 'exchange'">
          <Exchange ref="exchange"/>
        </template>
        <template v-if="tabsKey == 'mentionRecords'">
          <MentionRecords ref="mentionRecords"/>
        </template>
        <template v-if="tabsKey == 'financialRecords'">
          <FinancialRecords ref="financialRecords"/>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import CurrencyAccount from "./modules/CurrencyAccount.vue";
import LegalCurrencyAccount from "./modules/LegalCurrencyAccount.vue";
import NewCurrencySubscriptionRecord from "./modules/NewCurrencySubscriptionRecord.vue";
import Transfer from "./modules/Transfer.vue";
import Exchange from "./modules/Exchange.vue";
import MentionRecords from "./modules/MentionRecords.vue";
import FinancialRecords from "./modules/FinancialRecords.vue";

export default {
  components: {
    CurrencyAccount,
    LegalCurrencyAccount,
    NewCurrencySubscriptionRecord, Transfer, Exchange,
    MentionRecords,
    FinancialRecords
  },
  data() {
    return {
      tabs: [
        {name: this.$t("Trade account"), key: "CurrencyAccount"},
        {name: this.$t("Financial account"), key: "LegalCurrencyAccount"},
        // {
        //   name: "New currency subscription record",
        //   key: "NewCurrencySubscriptionRecord",
        // },
        {name: this.$t("Transfer"), key: "transfer"},
        // {name: "Exchange", key: "exchange"},
        // {name: "Withdrawal Record", key: "mentionRecords"},
      ],
      tabsKey: "CurrencyAccount",
      assets: [
        {
          name: "USDT",
          available: "0.00000000",
          underreview: "0.00000000",
          folded: "0.0000000000",
        },
      ],
      showExpandedRowRender: false,
    };
  },
  mounted() {
  },
  methods: {
    tabsHandler(value) {
      const vm = this
      if (this.tabsKey != value) {
        this.tabsKey = value;
        setTimeout(function () {
      console.log(vm.$refs, value, 'assetsWithdrawListassetsWithdrawList')
          vm.$refs[value] && vm.$refs[value].refresh()
        }, 100)
      }

    },
    expandedRowRenderHandler() {
      this.showExpandedRowRender = !this.showExpandedRowRender;
    },
  },
};
</script>
<style>
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style lang="scss" scoped>
.assets {
  min-height: 500px;
}
</style>
